﻿
<script lang="ts" setup>
    import NewUserButtonVue from './NewUserButton.vue'
    import EditUserButtonVue from './EditUserButton.vue'
    import { getAllUserService, getUserByNameGenderService } from '@/api/user.js'; //导入自定义函数
    import { ref, reactive } from 'vue' //导入数据响应ref、reactive
    import type { ComponentSize } from 'element-plus' //导入element-plus
    //按钮样式
    import { Delete } from '@element-plus/icons-vue'

    //分頁
    const size = ref<ComponentSize>('default');
    const background = ref(false);
    const disabled = ref(false);
    const dataTotal = ref(20);

    //设置分页参数
    const pagination = ref({
        currentPage: 1, //当前页
        pageSize: 20,//每页条数
    });

    //修改每页调试事件
    const handleSizeChange = (val: number) => {
        pagination.value.pageSize = val;
        pagination.value.currentPage = 1;
        //获取用户所有数据
        getAllUser();
    }

    const handleCurrentChange = (val: number) => {
        //计算有多少页
        let pageTotal = (dataTotal.value % pagination.value.pageSize) == 0 ? (dataTotal.value % pagination.value.pageSize) : (dataTotal.value % pagination.value.pageSize) + 1;

        if (val > pageTotal || val <= 0) {
            alert("跳转页码不存在");
        } else {
            pagination.value.currentPage = val;
            getAllUser();
        }
    }


    //定义响应式数据
    const users = ref([]);
    const genderOption = ref(['男', '女']);

    //同步等待响应 async await
    /*const getAllUser = async function() {
        //获取用户所有数据
        let data = await getAllUserService();
        users.value = data;
    }
    getAllUser();*/

    const getAllUser = async function () {
        //获取用户所有数据
        let data = await getAllUserService({ ...pagination.value });
        users.value = data.userList;
        dataTotal.value = data.total;

    }
    getAllUser();


    //定义响应数据 作为搜索条件
    const userSearchCondition = reactive({ uname: '', gender: '' });

    //搜索用户
    const onUserQuery = async () => {
        let data = await getUserByNameGenderService(userSearchCondition);
        users.value = data;
    }
    //重置
    const onUserReset = () => {
        userSearchCondition.uname = '';
        userSearchCondition.gender = '';
        //搜索
        onUserQuery();
    }

    // 处理用户更新
    const handleUpdateUser = (updatedUser) => {
        const index = users.value.findIndex((user) => user.id === updatedUser.id);
        if (index !== -1) {
            users.value[index] = updatedUser; // 更新用户数据
        }
    };

</script>

<template>

    <!--卡片-->
    <el-card class="box-card">
        <div class="card-header">
            <span>用户管理</span>
            <!--<el-button class="button" type="primary"><NewUserVue/></el-button>-->
            <NewUserButtonVue />
        </div>

        <div style="margin-top:20px">
            <hr />
        </div>

        <!--表單-->
        <el-form :inline="true" :model="userSearchCondition" class="demo-form-inline">
            <el-form-item label="用户名" class="el-input">
                <el-input v-model="userSearchCondition.uname" placeholder="请输入用戶名" clearable />
            </el-form-item>
            <el-form-item label="性別" class="el-input">
                <el-select v-model="userSearchCondition.gender"
                           placeholder="请选择性别..."
                           clearable>
                    <el-option v-for="gender in genderOption" :key="gender" :label="gender" :value="gender" />
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" @click="onUserQuery">搜索</el-button>
            </el-form-item>
            <el-form-item>
                <el-button type="defualt" @click="onUserReset">重置</el-button>
            </el-form-item>
        </el-form>

        <!--表格-->
        <el-table :data="users" style="width: 100%">
            <el-table-column prop="id" label="用户ID" />
            <el-table-column prop="uname" label="用户名" />
            <el-table-column prop="gender" label="性别" />

            <el-table-column label="操作" width="180">
                <template #default="scope">
                    <!--  props 将行数据传递给子组件, 监听子组件的 update-user 事件来更新数据 -->
                    <EditUserButtonVue :user="scope.row" @update-user="handleUpdateUser" />
                    <el-button type="danger" :icon="Delete" circle @click="handleDelete(scope.row)" />
                </template>
            </el-table-column>

            <!--<el-table-column label="操作" width="180">
                <div>-->
                    <!--<el-button type="primary" :icon="Edit" circle></el-button>-->
                    <!--父组件通过 props 将行数据传递给子组件 <EditUserButtonVue />，并监听子组件的 update-user 事件来更新数据  @update-user="handleUpdateUser" -->
                    <!--<EditUserButtonVue :user="scope.row" />

                    <el-button type="danger" :icon="Delete" circle />
                </div>
            </el-table-column>-->
        </el-table>

        <!--分頁-->
        <el-pagination class="el-p" v-model:current-page="pagination.currentPage"
                       v-model:page-size="pagination.pageSize"
                       :page-sizes="[10, 15, 20, 25]"
                       :size="size"
                       :disabled="disabled"
                       :background="background"
                       layout="total, sizes, prev, pager, next, jumper"
                       :total="dataTotal"
                       @size-change="handleSizeChange"
                       @current-change="handleCurrentChange" />
    </el-card>

</template>

<style scoped>
    .el-p {
        margin-top: 20px;
        display: flex;
        justify-content: flex-end;
    }

    .card-header {
        display: flex;
        justify-content: space-between;
    }

    .el-input {
        width: 240px;
    }
</style>